<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组件</title>
  </head>
  <body>
    <div id="app">
      <tb-header></tb-header>
      <tb-body></tb-body>
    </div>

    <script src="../../Vue.js"></script>
    <script>
      // 创建组件有两种方式

      // 全局创建组件
      // 里面有两个参数,第一个参数是组件的名称,第二个参数是选项对象
      Vue.component("TbHeader", {
        // 这个对象里面写的是option，new Vue可以写什么，这里就可以写什么，除了el
        // 里面必须要有一个东西叫template
        template: "<header>淘宝头部</header>",
      });

      /*
        组件的取名规则
          顾名思义(语义化)
          不能和现有的以及未来标签重复
          取名要使用连字符或者大驼峰
          使用的时候要使用连字符
      */

      Vue.component("TbBody", {
        // 组件里面的data要使用函数的方式
        data() {
          return {
            count: 123,
          };
        },
        template: `
          <main>淘宝内容 - {{ count }}</main>
        `,
      });

      new Vue({
        el: "#app",
      });
    </script>
  </body>
</html>
